<template>
  <div class="searchResult">
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        offset="50"
        @load="onLoad"
      >
        <ArticleItem
          :isShow="false"
          :articleItem="item"
          v-for="item in articleList"
          :key="item.id"
          @click.native="$router.push(`/article_detail?aid=${item.art_id}`)"
        ></ArticleItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSearch } from "@/api";
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  name: 'SearchResult',
  data() {
    return {
      // 文章数据
      articleList: [],
      page: 1,
      loading: false,
      finished: false
    };
  },
  components: {
    ArticleItem,
  },
  created() {
    this.getSearch();
  },
  methods: {
    // 获取搜索结果
    async getSearch() {
      const q = this.$route.params.keywords;
      const res = await getSearch({ q, page: this.page });
      try {
        // 没有更多数据
        if(res.data.results.length === 0){
          return this.finished = true;
        }

        this.articleList = [...this.articleList, ...res.data.results];
        this.loading = false;
      } catch (error) {}
    },
    // 上拉加载更多
    onLoad(){
      if(this.articleList.length !==0){
        this.page++;
        this.getSearch();
      }
    }
  },
};
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
